<html>
    <head>
        <meta charset="utf-8">
        <title>添加点要素(Geometry)</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                //1.创建map对象
                map = L.map("mapDiv", { 
                    layers: [
                        L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png')
                    ],      
                    center: [39.90,116.39],
                    zoom: 9
                });

                points();
            }

            function points(){
                //2. 计算当前地图视域范围
                var bbox = map.getBounds();
                var xmin = bbox.getWest();
                var xmax = bbox.getEast();
                var ymin = bbox.getSouth();
                var ymax = bbox.getNorth();
                var width = xmax - xmin;
                var height= ymax - ymin;

                //3. 在视域范围内随机生成20个点
                for(var i=0; i<20; i++){
                    var x = xmin + width * Math.random();
                    var y = ymin + height * Math.random();

                    //4. 创建圆，设置半径，并添加到地图上
                    L.circle([y, x], {radius: 3000}).addTo(map);
                }
            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



